﻿<template>
    <el-container style="height: 100%;">
        <el-header class="eg-web-header" style="height:50px">
            <el-row type="flex">
                <el-col style="width:360px">
                    <div class="eg-web-logo" style="float:left;">
                        {{GLOBAL.SYSTEM_NAME}}
                    </div>
                </el-col>
                <el-col>

                </el-col>
                <el-col style="width:400px;">
                    <el-row type="flex"
                            justify="end">
                        <el-col style="width:60px;text-align:center;">
                            <el-tooltip effect="dark"
                                        content="消息"
                                        placement="bottom">
                                <span @click="doMessage"
                                      class="my-toobar-item">
                                    <el-badge :value="messageList.length"
                                              :max="99"
                                              style="line-height:1rem;margin-right:2rem;cursor:pointer;">
                                        <i class="el-icon-message-solid"
                                           style="font-size:20px;margin-right:10px;vertical-align:middle"></i>
                                    </el-badge>
                                </span>
                            </el-tooltip>
                        </el-col>
                        <el-col style="width:60px;text-align:center;">
                            <el-tooltip v-if="!isFullscreen"
                                        effect="dark"
                                        content="全屏"
                                        placement="bottom">
                                <span @click="fullScreen"
                                      class="my-toobar-item">
                                    <i class="el-icon-eg-screenfull"
                                       style="font-size:20px;margin-right:10px;cursor:pointer;vertical-align:middle"></i>
                                </span>
                            </el-tooltip>

                            <el-tooltip v-else
                                        effect="dark"
                                        content="退出全屏"
                                        placement="bottom">
                                <span @click="exitFullscreen"
                                      class="my-toobar-item">
                                    <i class="el-icon-eg-exit-screenfull"
                                       style="font-size:20px;margin-right:10px;cursor:pointer;vertical-align:middle"></i>
                                </span>
                            </el-tooltip>
                        </el-col>
                        <el-col style="width:80px;">
                            <el-dropdown @command="onToolCommand">
                                <div style="cursor:pointer;">
                                    <span style="margin-left:5px;">{{$store.getters.getUserInfo?$store.getters.getUserInfo.userName:'#'}}</span>
                                    <i class="el-icon-caret-bottom" style="margin-left:5px;"></i>
                                </div>
                                <el-dropdown-menu slot="dropdown">
                                    <!--<el-dropdown-item command="updatePassword">修改密码</el-dropdown-item>-->
                                    <el-dropdown-item command="ChangePassword">修改密码</el-dropdown-item>
                                    <el-dropdown-item command="UserSetting">个人设置</el-dropdown-item>
                                    <el-dropdown-item command="Logout">注销</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-header>

        <el-container>
            <el-aside :width="(navCollapse?66:200)+'px'">
                <el-menu :collapse="navCollapse"
                         :router="true"
                         :default-active="navDefaultActive"
                         :default-openeds="navDefaultOpeneds"
                         style="height:100%;">
                    <div v-for="(nav1,index) in navs"
                         :key="'nav1'+index">
                        <el-submenu v-if="nav1.children && nav1.children.length>0"
                                    :index="nav1.id">
                            <template slot="title">
                                <i :class="nav1.icon"></i>
                                <span slot="title">{{nav1.title}}</span>
                            </template>
                            <el-menu-item v-for="(nav2,index2) in nav1.children"
                                          :key="'nav2'+index2"
                                          :index="GLOBAL.BASE_URL + nav2.url">{{nav2.title}}</el-menu-item>
                        </el-submenu>
                        <el-menu-item v-else
                                      :key="index"
                                      :index="GLOBAL.BASE_URL + nav1.url">
                            <i :class="nav1.icon"></i>
                            <span slot="title">{{nav1.title}}</span>
                        </el-menu-item>
                    </div>
                </el-menu>
            </el-aside>
            <el-main style="padding:0;">
                <router-view></router-view>
            </el-main>
        </el-container>


        <el-dialog title="修改密码"
                   width="800px"
                   :visible.sync="dialogChangePasswordVisible">
            <ChangePassword @cancel="dialogChangePasswordVisible=false"></ChangePassword>
        </el-dialog>

        <el-dialog title="个人设置"
                   width="800px"
                   :visible.sync="dialogUserSettingVisible">
            <UserSetting @cancel="dialogUserSettingVisible=false"></UserSetting>
        </el-dialog>
    </el-container>
</template>

<script>
    import MenuData from './MenuData';
    import MenuManager from './MenuManager';
    import ChangePassword from './ChangePassword';
    import UserSetting from './UserSetting';

    export default {
        components: {
            ChangePassword,
            UserSetting
        },
        data() {
            return {

                //是否全屏
                isFullscreen: false,

                //菜单相关
                navCollapse: false,
                navDefaultActive: '',
                navDefaultOpeneds: [],
                navs: [],

                messageList: [],
                messageDrawerVisible: false,

                //修改密码
                dialogChangePasswordVisible: false,

                //个人设置
                dialogUserSettingVisible: false
            }
        },

        created() {
            var self = this;
        },

        mounted() {
            var self = this;

            //self.navDefaultActive = window.location.hash.substring(1);
            self.navDefaultActive = self.$route.fullPath;
            /*//全部菜单都展开
            for (var i in self.navs) {
                var item = self.navs[i];
                self.navDefaultOpeneds.push(item.id);
            }*/

            window.onresize = function () {
                self.isFullscreen = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
            }

            self.init();
        },
        methods: {
            //全屏
            fullScreen: function () {
                var element = document.documentElement;
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                }
            },

            //退出全屏
            exitFullscreen: function () {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
            },

            //右上角下拉菜单
            onToolCommand: function (command) {
                var self = this;
                switch (command) {
                    case 'ChangePassword':
                        self.dialogChangePasswordVisible = true;
                        break;

                    case 'UserSetting':
                        self.dialogUserSettingVisible = true;
                        break;

                    case 'Logout':
                        var self = this;
                        self.$goRoute('/Logout');
                        break;
                }
            },

            init() {
                var self = this;

                /*var _navs = [];
                for (var i1 in MenuData) {
                    var m1 = MenuData[i1];
                    var _node1 = {
                        id: m1.id,
                        title: self.$l(m1.title),
                        icon: m1.icon,
                        children: []
                    };
                    for (var i2 in m1.children) {
                        var m2 = m1.children[i2];
                        if (self.$util.checkAuth(m2.id)) {
                            m2.title = self.$l(m2.title);
                            _node1.children.push(m2);
                        }
                    }

                    if (_node1.children.length > 0) {
                        _navs.push(_node1);
                    }
                }
                self.navs = _navs;*/
                MenuManager.init({ store: self.$store });
                self.navs = MenuManager.getMenus();
            },

            doMessage() {
                var self = this;
                //if (self.$route.fullPath !== self.GLOBAL.BASE_URL + '/Monitor/ReportList?filter=message') {
                //    self.$goRoute('/Monitor/ReportList', { filter: 'message' });
                //}
                self.messageDrawerVisible = true;
            }
        }
    };
</script>

<style>
    .el-menu-item.is-active {
        border-right: solid 5px #409EFF;
    }

    .my-toobar-item:hover {
        cursor: pointer;
    }
</style>